import { Calc } from '@/api'
import { AddO, Delete } from '@react-vant/icons'
import { Button, Form, Input } from 'react-vant'
import { Helmet, useMutation } from 'umi'

export default function PageForm2() {
  const [form] = Form.useForm()

  // #计算
  const { mutate: calc, isLoading: isCalcLoading } = useMutation({
    mutationFn: Calc,
    onSuccess: (res) => {
      const { bbdj, jydj } = res
      form.setFieldValue('bbdj', bbdj)
      form.setFieldValue('jydj', jydj)
    },
  })

  const handleSubmit = (values: any) => {
    calc({
      type: 6,
      data: {
        ...values,
      },
    })
  }

  return (
    <section className="p-4 pt-6 min-h-screen">
      <Helmet>
        <title>团购定价计算</title>
      </Helmet>

      <Form
        form={form}
        onFinish={handleSubmit}
        footer={(
          <footer className="mt-6">
            <Button loading={isCalcLoading} round nativeType="submit" type="primary" block>
              开始计算
            </Button>
          </footer>
        )}
      >
        <Form.List
          name="foods"
          initialValue={[{ price: undefined }]}
        >
          {(fields, { add, remove }) => (
            <>
              {fields.map((field, idx) => (
                <div key={field.key}>
                  <div className="flex justify-between items-center mt-4 mb-2">
                    <label className="text-base font-normal text-gray-400">
                      菜品
                      {idx + 1}
                      :
                    </label>
                    {
                      fields?.length > 1 && (
                        <Delete
                          color="grey"
                          fontSize={18}
                          onClick={() => remove(idx)}
                        />
                      )
                    }
                  </div>
                  <div className="overflow-hidden rounded-lg">
                    <Form.Item
                      labelWidth={120}
                      label="菜品成本"
                      name={[field.name, 'price']}
                      rules={[
                        {
                          type: 'number',
                          message: '请输入数字',
                          transform: value => Number(value),
                        },
                      ]}
                    >
                      <Input clearable placeholder="请输入" type="number" suffix="元" />
                    </Form.Item>
                  </div>
                </div>
              ))}

              <footer className="px-4 py-4 pb-8">
                <Button
                  plain
                  round
                  block
                  type="primary"
                  size="small"
                  icon={<AddO />}
                  onClick={() => add()}
                >
                  新增
                </Button>
              </footer>
            </>
          )}

        </Form.List>

        <div className="overflow-hidden bg-white rounded-lg">
          <Form.Item
            labelWidth={120}
            label="平台费率"
            name="ptfl"
            rules={[
              {
                type: 'number',
                transform: value => Number(value),
                min: 0.1,
                max: 99.9,
                message: '必须在0.1%到99.9%之间',
              },
            ]}
          >
            <Input clearable placeholder="请输入平台费率" suffix="%" />
          </Form.Item>

          <Form.Item
            labelWidth={120}
            label="期望利润率"
            name="qwlrl"
            rules={[
              {
                type: 'number',
                transform: value => Number(value),
                min: 0.1,
                max: 99.9,
                message: '必须在0.1%到99.9%之间',
              },
            ]}
          >
            <Input clearable placeholder="请输入期望利润率" suffix="%" />
          </Form.Item>
        </div>

        <div className="overflow-hidden mt-4 bg-white rounded-lg">
          <Form.Item
            labelWidth={120}
            label="保本定价"
            name="bbdj"
          >
            <Input readOnly placeholder="待计算" suffix="元" className="font-bold" />
          </Form.Item>
          <Form.Item
            labelWidth={120}
            label="参考定价"
            name="jydj"
          >
            <Input readOnly placeholder="待计算" suffix="元" className="font-bold" />
          </Form.Item>
        </div>
      </Form>
    </section>
  )
}
